<template>
  <div class="app-container">

    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">

          <h2 style="font-family: 楷体,serif">
            租房分期&emsp;
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="toAdd(1)"
              v-hasPermi="['finance:product:add']"
            >新增</el-button>
          </h2>
          <el-table v-loading="loading" :data="jrProductMap[1]">
            <el-table-column label="产品名称" align="center" prop="jrProductName" />
            <el-table-column label="资方" align="center" prop="companyName" />
            <el-table-column label="账户信息" align="center" prop="accountInformation" />
            <el-table-column label="分期期限" align="center" prop="instalmentPeriodName" />
            <el-table-column label="还款方式" align="center" prop="repaymentTypeName" />
            <el-table-column label="授信额度(%)" align="center" prop="creditLine" />
            <el-table-column label="申请状态" align="center" prop="applyStateName" />
            <el-table-column label="状态" align="center" prop="delFlg" >
              <template slot-scope="scope">
                <span v-if="scope.row.delFlg === 0 && scope.row.applyState === 1">正常</span>
                <span v-else-if="scope.row.delFlg === 1 && scope.row.applyState === 1" style="color: red">已作废</span>
                <span v-else-if="scope.row.applyState === 0">请先审核</span>
                <span v-else-if="scope.row.applyState === 2">审核未被通过</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">

                <!--

                  按钮逻辑：
                    一、无论什么状态都可以查看
                    二、一共有两大类：申请状态，是否作废状态
                        申请通过/驳回是去前提，只有通过或驳回才可以作废或修改
                -->

                <span>
                  <el-button
                    type="text"
                    v-hasPermi="['finance:product:query']"
                    @click="toShow(scope.row.id,1)"
                  >查看</el-button>
                </span>&emsp;

                <span v-if="scope.row.applyState === 0">
                  <el-button type="text" style="color: #85cf61" @click="handleApplyState(scope.row.id,1)">通过</el-button>
                  <el-button type="text" style="color: red" @click="handleApplyState(scope.row.id,2)">驳回</el-button>
                </span>

                <!-- 通过-->
                <span v-else-if="scope.row.applyState === 1">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                         type="text"
                         style="color: #97a8be"
                         v-hasPermi="['finance:product:edit']"
                       >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                         type="text"
                         style="color: #97a8be"
                         v-hasPermi="['finance:product:edit']"
                       >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>

                </span>

                <!-- 驳回-->
                <span v-else-if="scope.row.applyState === 2">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                        type="text"
                        style="color: #f8ac59"
                        v-hasPermi="['finance:product:edit']"
                        @click="toEdit(scope.row.id,1)"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>
                </span>

              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <br>
    <br>

    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">

          <h2 style="font-family: 楷体,serif">
            收房贷&emsp;
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="toAdd(2)"
              v-hasPermi="['finance:product:add']"
            >新增</el-button>
          </h2>
          <el-table v-loading="loading" :data="jrProductMap[2]">
            <el-table-column label="产品名称" align="center" prop="jrProductName" />
            <el-table-column label="资方" align="center" prop="companyName" />
            <el-table-column label="账户信息" align="center" prop="accountInformation" />
            <el-table-column label="分期期限" align="center" prop="instalmentPeriodName" />
            <el-table-column label="还款方式" align="center" prop="repaymentTypeName" />
            <el-table-column label="授信额度(%)" align="center" prop="creditLine" />
            <el-table-column label="申请状态" align="center" prop="applyStateName" />
            <el-table-column label="状态" align="center" prop="delFlg" >
              <template slot-scope="scope">
                <span v-if="scope.row.delFlg === 0 && scope.row.applyState === 1">正常</span>
                <span v-else-if="scope.row.delFlg === 1 && scope.row.applyState === 1" style="color: red">已作废</span>
                <span v-else-if="scope.row.applyState === 0">请先审核</span>
                <span v-else-if="scope.row.applyState === 2">审核未被通过</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">

                <span>
                  <el-button
                    type="text"
                    v-hasPermi="['finance:product:query']"
                    @click="toShow(scope.row.id,2)"
                  >查看</el-button>
                </span>&emsp;

                <span v-if="scope.row.applyState === 0">
                  <el-button type="text" style="color: #85cf61" @click="handleApplyState(scope.row.id,1)">通过</el-button>
                  <el-button type="text" style="color: red" @click="handleApplyState(scope.row.id,2)">驳回</el-button>
                </span>

                <!-- 通过-->
                <span v-else-if="scope.row.applyState === 1">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>

                </span>

                <!-- 驳回-->
                <span v-else-if="scope.row.applyState === 2">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                        type="text"
                        style="color: #f8ac59"
                        v-hasPermi="['finance:product:edit']"
                        @click="toEdit(scope.row.id,2)"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>
                </span>

              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <br>
    <br>

    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">

          <h2 style="font-family: 楷体,serif">
            应收租约保理&emsp;
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="toAdd(3)"
              v-hasPermi="['finance:product:add']"
            >新增</el-button>
          </h2>
          <el-table v-loading="loading" :data="jrProductMap[3]">
            <el-table-column label="产品名称" align="center" prop="jrProductName" />
            <el-table-column label="资方" align="center" prop="companyName" />
            <el-table-column label="账户信息" align="center" prop="accountInformation" />
            <el-table-column label="分期期限" align="center" prop="instalmentPeriodName" />
            <el-table-column label="还款方式" align="center" prop="repaymentTypeName" />
            <el-table-column label="授信额度(%)" align="center" prop="creditLine" />
            <el-table-column label="申请状态" align="center" prop="applyStateName" />
            <el-table-column label="状态" align="center" prop="delFlg" >
              <template slot-scope="scope">
                <span v-if="scope.row.delFlg === 0 && scope.row.applyState === 1">正常</span>
                <span v-else-if="scope.row.delFlg === 1 && scope.row.applyState === 1" style="color: red">已作废</span>
                <span v-else-if="scope.row.applyState === 0">请先审核</span>
                <span v-else-if="scope.row.applyState === 2">审核未被通过</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">

                <span>
                  <el-button
                    type="text"
                    v-hasPermi="['finance:product:query']"
                    @click="toShow(scope.row.id,3)"
                  >查看</el-button>
                </span>&emsp;

                <span v-if="scope.row.applyState === 0">
                  <el-button type="text" style="color: #85cf61" @click="handleApplyState(scope.row.id,1)">通过</el-button>
                  <el-button type="text" style="color: red" @click="handleApplyState(scope.row.id,2)">驳回</el-button>
                </span>

                <!-- 通过-->
                <span v-else-if="scope.row.applyState === 1">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>

                </span>

                <!-- 驳回-->
                <span v-else-if="scope.row.applyState === 2">

                    <span v-if="scope.row.delFlg === 0">
                      <el-button
                        type="text"
                        style="color: #f8ac59"
                        v-hasPermi="['finance:product:edit']"
                        @click="toEdit(scope.row.id,3)"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: red"
                        v-hasPermi="['finance:product:remove']"
                        @click="handleDelete(scope.row.id)"
                      >作废</el-button>
                    </span>

                    <span v-if="scope.row.delFlg === 1">
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:edit']"
                      >修改</el-button>
                      <el-button
                        type="text"
                        style="color: #97a8be"
                        v-hasPermi="['finance:product:remove']"
                      >作废</el-button>
                    </span>
                </span>

              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

  </div>
</template>

<script>
import { JrProductMap, getProduct, delProduct, addProduct, updateProduct } from "@/api/finance/product";

export default {
  name: "Product",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 金融产品表格数据
      jrProductMap: {},
    }
  },
  methods:{

    /** 查询金融产品列表 */
    getJrProductMap() {
      this.loading = true;
      JrProductMap(this.queryParams).then(response => {
        this.jrProductMap = response.data;
        this.loading = false;
      });
    },

    // 前往添加
    toAdd(index){

      // 添加租房分期
      if (index === 1){

        this.$router.push('/finance/product-save/installment');
      } else if (index === 2){// 收房贷

        this.$router.push('/finance/product-save/houseLoan');
      } else if (index === 3){// 应收租约保理

        this.$router.push('/finance/product-save/lease');
      }
    },
    toEdit(id,index){

      // 添加租房分期
      if (index === 1){

        this.$router.push('/finance/product-save/installment/' + id);
      } else if (index === 2){// 收房贷

        this.$router.push('/finance/product-save/houseLoan/' + id);
      } else if (index === 3){// 应收租约保理

        this.$router.push('/finance/product-save/lease/' + id);
      }
    },
    /** 删除按钮操作 */
    handleDelete(id) {

      this.$modal.confirm('是否作废本金融产品*(使本金融产品无效，不会影响过去已经生效的金融订单)').then(function() {
        return delProduct(id);
      }).then(() => {
        this.getJrProductMap();
        this.$modal.msgSuccess("作废成功");
      }).catch(() => {});
    },
    toShow(id,index){

      // 添加租房分期
      if (index === 1){

        this.$router.push('/finance/product-save/installment/' + id + "/true");
      } else if (index === 2){// 收房贷

        this.$router.push('/finance/product-save/houseLoan/' + id + "/true");
      } else if (index === 3){// 应收租约保理

        this.$router.push('/finance/product-save/lease/' + id + "/true");
      }
    },
    handleApplyState(id,state){

      let msg = state === 1 ? '通过' : '驳回';

      this.$modal.confirm('确认' + msg + "此产品吗？").then(function() {

        let upForm = {
          id: id,
          applyState: state,
        };
        return updateProduct(upForm);
      }).then(() => {
        this.getJrProductMap();
        this.$modal.msgSuccess("已" + msg);
      }).catch(() => {});
    }
  },
  created() {
    this.getJrProductMap();
  }
}
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
